<template>
	<view class="introduction">
		<view class="top">
			<view class="preparationCenter tt">
				<view class="preparationCenterTop">
					<img src="../../static/image/introductionImage/wzryLogo1.jpg" alt="">
				</view>
				<view class="preparationCenterBottom">
					备战中心
				</view>
			</view>
			<view class="heroHotList tt">
				<view class="heroHotListTop">
					<img src="../../static/image/introductionImage/wzryLogo2.jpg" alt="">
				</view>
				<view class="heroHotListBottom">
					英雄热度榜
				</view>
			</view>
		</view>
		<!-- 英雄图鉴 -->
		<view class="heroBookBox">
			<!-- 装饰1 -->
			<view class="heroBookBoxTop">
			</view>
			<view class="heroBookBoxContent">
				<view class="title">
					英雄图鉴
				</view>
				<view class="heroImages">
					<view @click="heroDetails(item)" class="forBox" v-for="item in heroImages">
						<img :src="item.heroUrl" alt="">
						<view class="heroName">
							{{item.heroName}}
						</view>
					</view>

				</view>
				<view class="seeAll">
					全部英雄
					<uni-icons custom-prefix="iconfont" type="icon-xiangyoujiantou" size="10"></uni-icons>
				</view>
			</view>
			<view class="heroBookBoxBottom">
				<!-- 装饰2 -->
			</view>
		</view>
		<!-- 大家都爱看 -->
		<view class="loveToSeeBox">
			<view class="loveToSeeBoxTop">
				<!-- 装饰1 -->
			</view>
			<view class="loveToSeeBoxContent">
				<view class="topText">
					大家都在看
				</view>
				<view v-for="item in infoList">
					<view style="padding-right: 13px;">
						<!-- 标题 -->
						<title-t :title="item.title" v-if="item.type == 4 ? false : true"></title-t>
						<!-- 内容 -->
						<text-t :text="item.text"></text-t>
						<!-- 单图片 -->
						<img-i :img="item.imageUrl" v-if="item.type == 1 ? true :false"></img-i>
						<!-- 多图片 -->
						<imgsI v-if="item.type == 5 ? true : false" :imgs="item.imageUrls"></imgsI>
						<!-- 回复 -->
						<reply-r :replyNum="item.replyNum" v-if="item.type == 4 ? true : false"></reply-r>
					</view>
					<!-- 分割线 -->
					<view class="loveToSeeBoxContentLine">
					</view>
				</view>

			</view>
			<view class="loveToSeeBoxBottom">
				<!-- 装饰2 -->
			</view>
		</view>

	</view>

</template>

<script>
	import {
		introductionData
	} from '../../mockData/introductionData/introductionData.js'
	import titleT from '../../components/introductionComponents/title.vue'
	import textT from '../../components/introductionComponents/text.vue'
	import imgI from '../../components/introductionComponents/img.vue'
	import replyR from '../../components/introductionComponents/reply.vue'
	import imgsI from '../../components/introductionComponents/imgs.vue'
	export default {
		data() {
			return {
				heroImages: introductionData.heroImages,
				infoList: introductionData.infoList,


			}
		},
		components: {
			titleT,
			textT,
			imgI,
			replyR,
			imgsI,
		},
		onLoad() {

		},
		methods: {
			// 英雄详情

			heroDetails(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/introductionSubpages/heroIllustratedBooksDetails/index',

					// events: {

					// 	acceptDataFromOpenedPage(data) {
					// 		console.log(data, 'acceptDataFromOpenedPage')
					// 	},

					// 	someEvent(data) {
					// 		console.log(data, 'someEvent')
					// 	}
					// },
					success(res) {
						res.eventChannel.emit('acceptDataFromOpenerPage', item)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.introduction {
		padding: 5px 16px;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tt {
				width: 48%;
				height: 100px;
				border: 1px solid #ccc;
				border-radius: 5px;
				display: flex;
				align-items: center;
				flex-direction: column;

				.preparationCenterBottom,
				.heroHotListBottom {
					font-size: 12px;
					font-weight: 600;
					margin-top: 8px;
				}

				.preparationCenterTop,
				.heroHotListTop {
					width: 100%;
					height: 70%;

					img {
						// width: 100%;
						// height: 100%;
						width: 100%;
						height: 100%;
						background-size: 100% 100%;
						border-radius: 5px 5px 0 0;
					}
				}

			}
		}

		.heroBookBox {
			margin: 20px 0;

			.heroBookBoxTop {
				height: 4px;
				border: 1px solid #ccc;
				border-radius: 30px;
				margin-bottom: -1px;
				border-bottom: none;
				width: 80%;
				margin-left: 10%;
			}

			.heroBookBoxContent {

				border: 1px solid #ccc;
				height: 300px;
				border-radius: 5px;
				padding: 15px 13px;

				.title {
					font-size: 14px;
					font-weight: 600;
					margin-left: 13px;
				}

				.heroImages {
					display: flex;
					flex-wrap: wrap;

					.forBox {
						width: 23%;
						padding: 6px 2px;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						padding-bottom: 0;

						.heroName {
							font-size: 10px;
							font-weight: 600;
							margin-top: 4px;
						}
					}

					img {
						width: 42px;
						height: 42px;
						border-radius: 3px;
					}
				}

				.seeAll {
					font-size: 12px;
					color: #ccc;
					margin: 10px 0 0px 13px;
				}
			}

			.heroBookBoxBottom {
				height: 4px;
				border: 1px solid #ccc;
				border-radius: 30px;
				margin-top: -1px;
				border-top: none;
				width: 80%;
				margin-left: 10%;
			}
		}

		.loveToSeeBox {
			margin: 20px 0;

			.loveToSeeBoxTop {
				height: 4px;
				border: 1px solid #ccc;
				border-radius: 30px;
				margin-bottom: -1px;
				border-bottom: none;
				width: 80%;
				margin-left: 10%;
			}

			.loveToSeeBoxContent {
				border: 1px solid #ccc;
				padding: 15px 22px;
				padding-right: 0;
				border-radius: 5px;

				.topText {
					font-size: 12px;
					font-weight: 700;
					margin-bottom: 10px;
				}

				.loveToSeeBoxContentLine {
					height: 1px;
					background-color: #ccc;
					margin: 15px 0;

				}
			}

			.loveToSeeBoxBottom {
				height: 4px;
				border: 1px solid #ccc;
				border-radius: 30px;
				margin-top: -1px;
				border-top: none;
				width: 80%;
				margin-left: 10%;
			}
		}
	}
</style>